<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	
	<script>
		/**
		 * 监听器是监听事件的对象，可以通过调用DOM元素的addEventListener方法指定它作为某个特定事件的监听器。
		 * 可以传入一个字符串作为该方法的第一个参数，该字符串用于指定所要监听的事件的类型，该方法的第二个参数则是
		 * 元素接收到事件后将要调用的事件处理程序。
		 * element.addEventListener(type, handler [, useCapture]);
		 * element.removeEventListener(type, handler [, useCapture]);
		 */
		var canvas = document.getElementById('canvas');
		
		function onMouseEvent (event){
			console.log(event.type);
		}
		canvas.addEventListener('mousedown', onMouseEvent, false); //鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发
		canvas.addEventListener('mouseup', onMouseEvent, false); //鼠标按钮被释放弹起时触发。不能通过键盘触发。
		canvas.addEventListener('click', onMouseEvent, false);  //单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
		canvas.addEventListener('dblclick', onMouseEvent, false); //双击鼠标左键时触发。
		canvas.addEventListener('mousewheel', onMouseEvent, false); //在垂直方向上滚动页面时，会触发mousewheel事件
		canvas.addEventListener('mousemove', onMouseEvent, false); //鼠标在元素内部移到时不断触发。不能通过键盘触发。
		canvas.addEventListener('mouseover', onMouseEvent, false); //鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
		canvas.addEventListener('mouseout', onMouseEvent, false); //鼠标移出目标元素上方。
		
	</script>
</body>
</html>